<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <body> 
        <button id="loginBtn">登录</button> 
    </body> 
    <script>
        //懒加载---创建对象
        //创建对象和管理单例的职责被分布在两个不同的方法中，
        //这两个方法组合起来才具有单例模式的威力。

        //代理
        function getSingle(fn){
            var result;
            return function(){
                return (result || (result = fn.apply(this,arguments)))
            }
        }
        
        var createLoginLayer=function(){
            var div = document.createElement('div');
            div.innerHTML = '我是登录窗口';
            div.style.display = 'none';
            document.body.appendChild(div);
            return div;
        }
        var createSingleLoginLayer = getSingle(createLoginLayer);
        // document.getElementById('loginBtn').onclick = function(){
        //     var loginLayer = createSingleLoginLayer();
        //     loginLayer.style.display = 'block';
        // }

        var createSingleIframe = getSingle( 
            function(){ 
                var iframe = document.createElement ( 'iframe' ); 
                document.body.appendChild( iframe ); 
                return iframe; 
            }
        ); 
        document.getElementById( 'loginBtn' ).onclick = function(){ 
            var loginLayer = createSingleIframe(); 
            loginLayer.src = 'https://www.baidu.com'; 
        }; 
       
    </script>
</body>
</html>